<template>
  <div>
    <p class="contitle">
      <span>全部留言</span>
    </p>
    <ul class="content">
      <li v-for="item in commentList" :key="item.commentid">
        <dl>
          <dt>{{ item.commentquestion }}</dt>
          <dd class="author">
            网友: {{ item.username }}
            <span class="timer"> {{ item.commenttime }}</span>
          </dd>
          <dd v-for="item1 in item.replyList" :key="item1.replyid">
            {{ item1.replycontent }}
          </dd>
        </dl>
      </li>
      <li class="pagination">
        <el-pagination
          small
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :page-sizes="[4, 8, 10, 20]"
          :background="true"
          layout="->,total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </li>
    </ul>
    <div class="comment">
      <el-button type="primary" @click="handleAdd">留言</el-button>
    </div>

    <el-dialog
      append-to-body
      v-model="updFormVisible"
      title="留言"
      width="500"
      center
    >
      <el-form size="small" :model="formData" label-width="80px">
        <el-form-item label="留言标题:">
          <el-input v-model="formData.commentquestion" />
        </el-form-item>
        <el-form-item label="留言内容:">
          <el-input type="textarea" v-model="formData.content" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveEdit()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { getCommentPage, addComment } from "@/api/comment";
import { CODE } from "@/utils/StatusCode";
import { ElMessage } from "element-plus";

const store = useStore();
const router = useRouter();
const route = useRoute();

const userInfo = computed(() => {
  return store.getters.getUserInfo;
});

onMounted(() => {
  getCommentList();
});

const pagination = reactive({
  currentPage: 1,
  pageSize: 8,
});
const total = ref(0);
interface reply {
  replyid: number;
  userid: number;
  commentid: number;
  replytime: string;
  replycontent: string;
}
interface comment {
  commentid: number;
  userid: number;
  commentquestion: string;
  commenttime: string;
  content: string;
  status: number;
  username: string;
  replyList: reply[];
}
const commentList = ref<comment[]>([]);
async function getCommentList() {
  const res = await getCommentPage(pagination);
  if (res.code == CODE.OK) {
    commentList.value = res.data.records;
    total.value = res.data.total;
  }
}
function handleSizeChange(val: number) {
  pagination.pageSize = val;
  pagination.currentPage = 1;
  getCommentList();
}
const handleCurrentChange = (val: number) => {
  pagination.currentPage = val;
  getCommentList();
};

const updFormVisible = ref(false);
const formData = reactive({
  userid: "",
  commentquestion: "",
  content: "",
});
// 清空表单
function resetForm() {
  Object.keys(formData).forEach((fieId) => {
    formData[fieId] = "";
  });
}
//新增
function handleAdd() {
  resetForm();
  updFormVisible.value = true;
}
// 保存
async function saveEdit() {
  formData.userid=userInfo.value.userid;
  const res = await addComment(formData);
  if (res.code == CODE.OK) {
    getCommentList();
    ElMessage({
      message: res.message,
      type: "success",
    });
    updFormVisible.value = false;
  } else {
    ElMessage({
      message: res.message,
      type: "error",
    });
  }
}
</script>

<style lang="less" scoped>
.contitle {
  font-size: 14px;
  line-height: 30px;
  background: url(../../assets/img/bg.png) -230px -100px no-repeat;
  border-bottom: 2px solid #fbaa62;
  padding-left: 25px;
  font-weight: bold;
}
.content {
  ul {
    li {
      border-bottom: 1px solid #fbaa62;
      dl {
        line-height: 28px;
        dt {
          padding: 0 20px;
          font-size: 14px;
          font-weight: bold;
          color: #666;
          background: #fafafa;
        }
        dd {
          padding: 0 20px;
        }
        .author {
          color: #999;
          .timer {
            font-size: 10px;
            margin-left: 20px;
          }
        }
      }
    }
    .pagination {
      padding: 10px;
      border-color: #999;
    }
  }
}
.comment {
  text-align: center;
  margin-top: 30px;
}
</style>
